<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
<link rel="stylesheet" href="css/apaltment.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
	.model_msg{
		height:63px !important;
		line-height:65px !important;
	}
	.other_msg{
		margin: 90px auto 0;
	}
	.detail_top_left{
		width:47%;
	}
	.carousel-control.right{
		left:515px !important;
	}
	.detail_top{
		border:0 !important
	}
</style>
<body>
<%String h_id = request.getParameter("h_id"); %>
<div class="detail">
        <div class="detail_top">
            <div class="detail_top_left">
               <div id="myCarousel" class="carousel slide">
                  <!-- 轮播（Carousel）指标 -->
                  <ol class="carousel-indicators">
                     
                  </ol>   
                  <!-- 轮播（Carousel）项目 -->
                  <div class="carousel-inner" id="lunbo_img">
                     
                  </div>
                  <!-- 轮播（Carousel）导航 -->
                  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                     <span class="sr-only">Previous</span>
                  </a>
                  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                     <span class="sr-only">Next</span>
                  </a>
               </div> 
            </div>
            <div class="detail_top_right">
                <div class="row model_msg">
                    <div class="col-md-4">
                       所属地区：
                    </div>
                    <div class="col-md-8 hregion">
                      dsa
                    </div>
                 </div>
                 <div class="row model_msg">
                    <div class="col-md-4">
                       所属小区：
                    </div>
                    <div class="col-md-8 hvillage">
                       
                    </div>
                 </div>
                 <div class="row model_msg">
                    <div class="col-md-4">
                       单元号：
                    </div>
                    <div class="col-md-8 hunit">
                       
                    </div>
                 </div>
                 <div class="row model_msg">
                    <div class="col-md-4">
                       房间号：
                    </div>
                    <div class="col-md-8 hroomnum">
                     
                    </div>
                 </div>
                 <div class="row model_msg">
                    <div class="col-md-4">
                       朝向：
                    </div>
                    <div class="col-md-8 horientation">
                      
                    </div>
                 </div>
                 <div class="row model_msg">
                  <div class="col-md-4">
                     状态：
                  </div>
                  <div class="col-md-8 hstate">
                     
                  </div>
               </div>
            </div>
        </div>
        <div class="other_msg">
           <div class="row model_msg">
               <div class="col-md-3">
                  装修：
               </div>
               <div class="col-md-3 hrenovation">
                  
               </div>
               <div class="col-md-3">
                  是否双气：
               </div>
               <div class="col-md-3 hshuangqi">
                  
               </div>
           </div>
           <div class="row model_msg">
               <div class="col-md-3">
                  价格：
               </div>
               <div class="col-md-3 hprice">
                  
               </div>
               <div class="col-md-3">
                  添加时间：
               </div>
               <div class="col-md-3 haddtime">
                 
               </div>
            </div>
        </div>
        <div class="detail_faciliti">
           
            <div class="fac">
               <img class="jiaju" src="images/微信截图_20200803215223.png" alt="">
               <p>床（独）</p>
            </div>
            <div class="fac">
               <img class="jiaju" src="images/微信截图_20200803215304.png" alt="">
               <p>衣柜</p>
            </div>
            <div class="fac">
               <img class="jiaju" class="jiaju" src="images/微信截图_20200803215335.png" alt="">
               <p>电视</p>
            </div>
            <div class="fac">
               <img class="jiaju" src="images/微信截图_20200803215352.png" alt="">
               <p>冰箱</p>
            </div>
            <div class="fac">
               <img class="jiaju" src="images/微信截图_20200803215412.png" alt="">
               <p>洗衣机</p>
            </div>
            <div class="fac">
               <img class="jiaju" src="images/微信截图_20200803215431.png" alt="">
               <p>空调</p>
            </div>
            <div class="fac">
               <img class="jiaju" src="images/微信截图_20200803215447.png" alt="">
               <p>热水器</p>
            </div>
            <div class="fac">
               <img class="jiaju" src="images/微信截图_20200803215500.png" alt="">
               <p>宽带</p>
            </div>
            <div class="fac">
               <img class="jiaju" src="images/微信截图_20200803215521.png" alt="">
               <p>暖气</p>
            </div>
            <div class="fac">
               <img class="jiaju" src="images/微信截图_20200803215537.png" alt="">
               <p>阳台</p>
            </div>
            <div class="fac">
               <img class="jiaju" src="images/微信截图_20200803215557.png" alt="">
               <p>卫生间</p>
            </div>
            <div class="fac">
               <img class="jiaju" src="images/微信截图_20200803215610.png" alt="">
               <p>智能门锁</p>
            </div>
            <div class="fac">
               <img class="jiaju" src="images/微信截图_20200803215637.png" alt="">
               <p>抽烟机</p>
            </div>
            <div class="fac">
               <img class="jiaju" src="images/微信截图_20200803215652.png" alt="">
               <p>可做饭</p>
            </div>
            <div class="fac">
               <img class="jiaju" src="images/微信截图_20200803215318.png" alt="">
               <p>沙发</p>
            </div>
            <div class="fac" style="margin-top: -100px;">
               <img class="jiaju" src="images/微信截图_20200803215740.png" alt="">
               <p>燃气灶</p>
            </div>
        </div>
    </div>
</body>
<script>
	var h_id = <%= h_id%>
$(function(){
    ajaxDetail(h_id);
});

function ajaxDetail(h_id){
	$.ajax({
		url:"HouseServlet",
		dataType:"JSON",
		data:{hid:h_id},
		success:function(data){
			console.log("请求成功")
			console.log(data)
			
			//渲染图片
			var str_pic = data.h_pic
			var pic = str_pic.split(",")
			Pic(pic)
			
			//渲染家具
			var str = data.h_facilities
			var jiaju = str.split(",")
			Jiaju(jiaju)
			if(data.h_shuangqi=="0"){
				data.h_shuangqi="无双气"
			}else{
				data.h_shuangqi="有双气"
			}
			if(data.h_state=="0"){
				data.h_state="未租"
			}else{
				data.h_state="已租"
			}
			$(".item").eq(0).addClass("active")
			$(".lis").eq(0).addClass("active")
			
			$(".hregion").html(data.h_region)
			$(".hvillage").html(data.h_village)
			$(".hunit").html(data.h_unit)
			$(".hroomnum").html(data.h_roomnum)
			$(".horientation").html(data.h_orientation)
			$(".hstate").html(data.h_state)
			$(".hrenovation").html(data.h_renovation)
			$(".hshuangqi").html(data.h_shuangqi)
			$(".hprice").html(data.h_price+"元/月")
			$(".haddtime").html(data.h_addtime)
			
		},
		error:function(err){
			console.log(err)
		}
	})
}

//渲染图片
function Pic(msg){
	var lunbo_img = ""
	var carousel_indicators=""
		$(".lunbo_img").html("")
	for(var i=0;i<msg.length;i++){
		lunbo_img += "<div class='item'>"+
              "<img src='"+msg[i]+"' alt='First slide'>"+
              "</div>"
         carousel_indicators +="<li class='lis' data-target='#myCarousel' data-slide-to='"+i+"'></li>"
	}
	
	$(".carousel-indicators").html(carousel_indicators)
	$("#lunbo_img").html(lunbo_img)
}

//渲染家具
function Jiaju(msg){
	console.log("家具："+msg)
	var imgOne = "images/微信截图_20200803215710.png"
	for(var i=0;i<msg.length;i++){
		if(msg[i]!="1"){
			var index = i
			$(".jiaju").eq(index).attr("src",imgOne)
		}
	}
}
</script>
</html>